<template>
  <div class="Comment">
    <!-- 评论列表 -->
    <van-nav-bar title="评论列表" left-arrow @click-left="onClickLeft" />
    <!-- 评论导航 -->
    <van-tabs :active="active">
      <van-tab v-for="(item,index) in navName" :title="item.name" :key="index">
        <!--  -->
        <van-cell-group inset v-for="(item,index) in goodsCommont" :key="index">
          <!-- 评论列表 -->
          <div class="userComment">
            <div class="userCommentTop">
              <!-- 头像 -->
              <img :src="item.src" />
              <!-- 用户信息 -->
              <p>
                <b>{{item.name}}</b>
                <span>{{item.date}}</span>
              </p>
            </div>
            <!-- 评论详情 -->
            <div class="userCommentBot">{{item.discuss}}</div>
          </div>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 处理时间组件
import moment from 'moment'
export default {
  name: 'YscShopComment',

  data () {
    return {
      // 当行索引
      active: 0,
      // 导航列表
      navName: [
        {
          name: "全部",
        },
        {
          name: "图片",
        },
      ],
      // 评论列表
      goodsCommont: []
    };
  },
  created () {
    const info = JSON.parse(window.sessionStorage.getItem('goodsInfo'))
    // 处理日期
    info.goodsCommont.forEach(item => {
      item.date = moment(Number(item.date)).format('YYYY-MM-DD HH-MM-SS')
    })
    // 赋值信息
    this.goodsCommont = info.goodsCommont
  },
  mounted () {

  },

  methods: {
    // 返回商品详情
    onClickLeft () {
      this.$bus.$emit('CommentBack', false)
    }
  },
};
</script>

<style lang="less" scoped>
.Comment {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #f5f9fa;
  z-index: 2;
  .van-cell-group {
    margin-top: 10px;
  }
  // 评论列表
  .userComment {
    // 评论者用户信息
    padding: 10px;
    box-sizing: border-box;
    // 用户信息
    .userCommentTop {
      display: flex;
      border-bottom: 0.5px solid #ebedf0;
      padding-bottom: 10px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 20px;
      }
      p {
        display: flex;
        flex-direction: column;
        b {
          font-size: 14px;
        }
        span {
          font-size: 10px;
        }
      }
    }
    // 用户评论信息
    .userCommentBot {
      font-size: 16px;
      padding-top: 10px;
    }
  }
}
</style>